<template>
  <NavBar safe-area-inset-top @click-left="back" @click-right="onClickRight">
    <template #left> <Icon name="arrow-left" size="20" color="#fff" /> </template>
    <template #title>{{ title }}</template>
    <template #right>{{ rightTitle }}</template>
  </NavBar>
  <layout>
    <router-view />
  </layout>
</template>

<script setup>
  import { useStore } from 'vuex';
  import { useRouter } from 'vue-router';
  import { computed } from 'vue';
  import { NavBar, Icon } from 'vant';

  const $store = useStore();
  const $router = useRouter();

  const title = computed(() => $store.state.navigateTitle);
  const rightTitle = computed(() => $store.state.navigateRightTitle);

  function back() {
    if (!$store.state.navigateBack) {
      $router.go(-1);
    } else {
      $router.push($store.state.navigateBack);
    }
  }

  function onClickRight() {
    $router.push($store.state.navigateRightRouter);
  }
</script>